<template>
  <div 
    :class="[
      'skeleton-loader',
      type,
      {
        'animated': animated,
        'loading': loading,
        'responsive': responsive,
        [theme]: theme
      },
      customClass
    ]"
    :style="containerStyle"
  >
    <!-- 头像骨架 -->
    <div 
      v-if="showAvatar" 
      :class="[
        'skeleton-avatar',
        avatarShape,
        `size-${avatarSize}`
      ]"
    ></div>
    
    <!-- 标题骨架 -->
    <div v-if="showTitle" class="skeleton-title" :style="titleStyle"></div>
    
    <!-- 段落骨架 -->
    <div v-if="showParagraph" class="skeleton-paragraph">
      <div 
        v-for="(line, index) in paragraphLines" 
        :key="index"
        class="skeleton-line"
        :style="getLineStyle(index)"
      ></div>
    </div>
    
    <!-- 自定义行数 -->
    <div v-if="!showParagraph && rows > 0" class="skeleton-rows">
      <div 
        v-for="n in rows" 
        :key="n"
        class="skeleton-line"
        :style="getRowStyle(n)"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 基本属性
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'card', 'list', 'table'].includes(value)
  },
  rows: {
    type: Number,
    default: 3
  },
  animated: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: true
  },
  
  // 头像相关
  showAvatar: {
    type: Boolean,
    default: false
  },
  avatarShape: {
    type: String,
    default: 'circle',
    validator: (value) => ['circle', 'square'].includes(value)
  },
  avatarSize: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  
  // 标题相关
  showTitle: {
    type: Boolean,
    default: true
  },
  titleWidth: {
    type: [String, Number],
    default: '60%'
  },
  
  // 段落相关
  showParagraph: {
    type: Boolean,
    default: true
  },
  paragraphRows: {
    type: Number,
    default: 3
  },
  
  // 样式相关
  width: {
    type: [String, Number],
    default: '100%'
  },
  height: {
    type: [String, Number],
    default: 'auto'
  },
  borderRadius: {
    type: [String, Number],
    default: '4px'
  },
  customClass: {
    type: String,
    default: ''
  },
  
  // 响应式和主题
  responsive: {
    type: Boolean,
    default: false
  },
  theme: {
    type: String,
    default: 'light',
    validator: (value) => ['light', 'dark'].includes(value)
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  const style = {}
  
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  }
  
  if (props.height && props.height !== 'auto') {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  }
  
  if (props.borderRadius) {
    style.borderRadius = typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius
  }
  
  return style
})

// 计算标题样式
const titleStyle = computed(() => {
  return {
    width: typeof props.titleWidth === 'number' ? `${props.titleWidth}px` : props.titleWidth
  }
})

// 计算段落行数
const paragraphLines = computed(() => {
  return Array.from({ length: props.paragraphRows }, (_, index) => index)
})

// 获取行样式
const getLineStyle = (index) => {
  const isLast = index === props.paragraphRows - 1
  return {
    width: isLast ? '60%' : '100%'
  }
}

// 获取行样式（自定义行数）
const getRowStyle = (rowNumber) => {
  const isLast = rowNumber === props.rows
  return {
    width: isLast ? '60%' : '100%'
  }
}
</script>

<style scoped>
.skeleton-loader {
  @apply w-full;
}

.skeleton-loader.animated .skeleton-avatar,
.skeleton-loader.animated .skeleton-title,
.skeleton-loader.animated .skeleton-line {
  @apply relative overflow-hidden;
}

.skeleton-loader.animated .skeleton-avatar::after,
.skeleton-loader.animated .skeleton-title::after,
.skeleton-loader.animated .skeleton-line::after {
  @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
  content: '';
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 头像样式 */
.skeleton-avatar {
  @apply bg-gray-200 flex-shrink-0 mb-4;
}

.skeleton-avatar.circle {
  @apply rounded-full;
}

.skeleton-avatar.square {
  @apply rounded;
}

.skeleton-avatar.size-small {
  @apply w-8 h-8;
}

.skeleton-avatar.size-medium {
  @apply w-12 h-12;
}

.skeleton-avatar.size-large {
  @apply w-16 h-16;
}

/* 标题样式 */
.skeleton-title {
  @apply h-4 bg-gray-200 rounded mb-3;
}

/* 段落样式 */
.skeleton-paragraph,
.skeleton-rows {
  @apply space-y-2;
}

.skeleton-line {
  @apply h-3 bg-gray-200 rounded;
}

/* 类型样式 */
.skeleton-loader.card {
  @apply p-4 border border-gray-200 rounded-lg;
}

.skeleton-loader.list {
  @apply flex items-start space-x-3 p-3;
}

.skeleton-loader.list .skeleton-avatar {
  @apply mb-0;
}

.skeleton-loader.table {
  @apply space-y-3;
}

.skeleton-loader.table .skeleton-line {
  @apply h-8;
}

/* 响应式样式 */
.skeleton-loader.responsive {
  @apply w-full;
}

@media (max-width: 640px) {
  .skeleton-loader.responsive .skeleton-avatar.size-large {
    @apply w-12 h-12;
  }
  
  .skeleton-loader.responsive .skeleton-title {
    @apply h-3;
  }
  
  .skeleton-loader.responsive .skeleton-line {
    @apply h-2;
  }
}

/* 主题样式 */
.skeleton-loader.dark .skeleton-avatar,
.skeleton-loader.dark .skeleton-title,
.skeleton-loader.dark .skeleton-line {
  @apply bg-gray-700;
}

.skeleton-loader.dark.card {
  @apply border-gray-600 bg-gray-800;
}

.skeleton-loader.dark.animated .skeleton-avatar::after,
.skeleton-loader.dark.animated .skeleton-title::after,
.skeleton-loader.dark.animated .skeleton-line::after {
  @apply bg-gradient-to-r from-transparent via-gray-600/20 to-transparent;
}

/* 加载状态 */
.skeleton-loader:not(.loading) {
  @apply opacity-50;
}
</style>